<template>
	<view class="content-container">
		<view class="trade-item" v-for="(item, index) in competition" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.title}} </text>
						<view class="trade-tag">
							<text>冠军</text>
							<text>{{item.honorprice}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.club}}</text>
					<text class="trade-info">时间: {{item.data}} {{item.time}}</text>
					<text class="trade-info">地址: {{item.fullAddress}} {{item.addressDetail}}</text>

					<text class="trade-contact">联系方式: {{item.contactName || '暂无'}}</text>
				</view>
			</view>
		</view>
	</view>

	<view class="introduce">
		<text>赛事详情</text>
		<text>{{item.introduce}}</text>
	</view>



    <view class="sign">
    	<view class="sign-header">
    		<text class="sign-first">第一场</text>
    	</view>
    
    	<view class="sign-content">
    		<view class="sign-bottem">
    			<text class="sign-info">开始时间：{{competition[0]?.data ||'2025-02-03'}}
    				{{competition[0]?.time||'23:46'}}</text>
    			<text class="sign-info">报名：{{competition[0].userprice}}元</text>
    		</view>
    
    		<button class="submit-button" @click="signOrder">报名</button>
    	</view>
    </view>
	
	
	<view class="information-container" v-if="informationb" @click="informationa">
		<!-- <view class="information-content">
				
			</view> -->
	
		<view class="information-title">请输入您的姓名、电话，以便举办方联系您</view>
	
		<view class="information-text">
			<text class="user-information">姓名</text>
			<input class="information-input" v-model="name" placeholder="请输入您的姓名" />
		</view>
	
		<view class="information-text">
			<text class="user-information">手机号</text>
			<input class="information-input" v-model="phone" placeholder="请输入您的电话号码" />
		</view>
	
		<view class="uni-px-5 uni-pb-5">
			<!-- <view class="text">单选选中：{{JSON.stringify(radio1)}}</view> -->
			<text class="user-information">性别</text>
			<uni-data-checkbox selectedColor="#fdad18" selectedTextColor="#fdad18" v-model="radio1"
				:localdata="sex"></uni-data-checkbox>
		</view>
	
	
		<view class="information-button">
			<button @click="submitInformation" class="yes">确认</button>
			<button @click="cancelInformation" class="no">取消</button>
		</view>
	</view>


	<view></view>





</template>

<script>
	export default {
		data() {
			return {
				competition: {},
				name:'',
				phone:'',
				radio1: 0,
				sex: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
			};
		},
		// onLoad(options) {
		//     this.loadCompetitionDetail(options.id)
		//   },
		methods: {
			getImageUrl(imagePath) {
				if (!imagePath) return '/static/renwu/taiqiu.png';
				if (imagePath.startsWith('http')) return imagePath;
				return `https://billiards.cqtrust.cn${imagePath}`;
			},

			signOrder() {
					// const token = getStorageSync('token');
					// if(!token){
					// 	uni.navigateTo({
					// 		url:'/pages/my/user/index?redirect=' + encodeURIComponent('/' + getCurrentPages()[0].route)
					// 	});
					// return;
					// }
					this.informationb = true;
					
					
				},
				
				submitInformation(){
					if(!this.name ||!this.phone){
						uni.showToast({
											title: '请输入姓名和手机号',
											icon: 'none'
										});
										return;
					}
					
					//关闭弹窗
					this.informationb = false;
					
					//支付
					this.wechatPay();
				},
				
				//取消
				cancelInformation() {
							this.informationb = false;
						},
				
				//微信支付
				wechatPay(){
					
				},
				// getInformation(){
				// 	if(!this.name||!this.phone){
				// 		uni.showToast({
				// 			title:'请输入详细信息',
				// 			icon:none
				// 		});
				// 	}
				// 	return;
			
				// 	this.$http.get("https://billiards.cqtrust.cn/workers_admin", {
			
				// 			work_city: this.queryParams.work_city,
			
				// 		})
				// 		.then((res) => {
				// 			console.log(res);
				// 			const {
				// 				code,
				// 				msg,
				// 				data
				// 			} = res;
				// 			uni.showToast({
				// 				title: msg,
				// 				icon: "none",
				// 			});
				// 			if (code == 1 || code == 200) {
				// 				if (data && data.length > 0) {
				// 					this.localMasters = data;
				// 					console.log(data);
				// 				}
				// 				return Promise.resolve(true);
				// 			}
				// 			return Promise.reject(false);
				// 		})
				// 		.catch((res) => {
				// 			console.log(res);
				// 			return Promise.reject(false);
				// 		});
			
				// 	// 提交成功
				// 	        this.informationb = false;
				// 	        uni.showToast({
				// 	            title: '报名成功',
				// 	            icon: 'success'
				// 	        });
				// },
			
			
			
			},
	}
</script>

<style>
	.content-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.trade-item {
		padding: 20rpx 0;
	}

	.trade-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.trade-title {
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}

	.trade-tag {
		display: flex;
		align-items: center;
	}

	.trade-tag text {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #ffaa00;
	}

	.trade-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.trade-info {
		display: block;
		font-size: 26rpx;
		color: #888;
		margin-bottom: 5rpx;
	}

	.trade-contact {
		display: block;
		font-size: 26rpx;
		color: #333;
		margin-top: 10rpx;
	}

	.trade-content-wrapper {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	.trade-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.trade-info-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.introduce {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
		display: block;
		padding-left: 10rpx;
		border-left: 6rpx solid #fdad18;
		margin-left: 10rpx;
	}

    .sign {
    	position: fixed;
    	bottom: 90rpx;
    	left: 20rpx;
    	right: 20rpx;
    	width: auto;
    	border-radius: 10rpx;
    	border: 3rpx solid #ffaa00;
    	margin-top: 40rpx;
    	overflow: hidden;
    	/* 保圆角效果不被子元素破坏 */
    }
    
    .sign-header {
    
    	background-color: #fde8ce;
    	padding: 15rpx 20rpx;
    	text-align: center;
    }
    
    .sign-first {
    
    	font-size: 32rpx;
    	font-weight: bold;
    	color: #333;
    }
    
    .sign-content {
    	display: flex;
    	justify-content: space-around;
    	align-items: center;
    	padding: 20rpx;
    	background-color: #fff;
    }
    
    .sign-bottem {
    	padding: 10rpx;
    
    }
    
    
    .sign-info {
    	display: block;
    	font-size: 30rpx;
    	color: #888;
    	margin-bottom: 10rpx;
    }
    
    .text {
    	font-size: 12px;
    	color: #666;
    	margin-top: 5px;
    }
    
    .uni-px-5 {
    
    	padding-left: 0;
    
    	padding-right: 5px;
    }
    
    .uni-pb-5 {
    	padding-bottom: 5px;
    }
    
    .submit-button {
    	width: 20%;
    	background-color: #ffaa00;
    	margin-right: 5rpx;
    	font-size: 32rpx;
    	border-radius: 30rpx;
    	border: none;
    	color: white;
    }
    
    
    .information-container {
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	width: 80%;
    	background: #fff;
    	border-radius: 16rpx;
    	padding: 15rpx 30rpx;
    	z-index: 999;
    	box-sizing: border-box;
    }
    
    
    .information-title {
    	font-size: 25rpx;
    	color: #333;
    	text-align: center;
    	margin-bottom: 10rpx;
    	font-weight: 500;
    }
    
    
    .information-text {
    	margin-bottom: 10rpx;
    }
    
    
    .user-information {
    	display: block;
    	font-size: 28rpx;
    	color: #666;
    	margin-bottom: 10rpx;
    }
    
    .information-input {
    	width: 100%;
    	height: 80rpx;
    	border: 1rpx solid #e5e5e5;
    	border-radius: 8rpx;
    	padding: 0 15rpx;
    	font-size: 25rpx;
    	box-sizing: border-box;
    }
    
    
    .uni-section {
    	margin: 9rpx 0;
    }
    
    
    .information-button {
    	display: flex;
    	justify-content: space-between;
    	margin-top: 10rpx;
    }
    
    
    .information-button button {
    	width: 48%;
    	height: 70rpx;
    	/* border-radius: 40rpx; */
    	font-size: 30rpx;
    	border: none;
    }
    
    
    .yes {
    	background: #f5f5f5;
    	color: #666;
    }
    
    
    .no {
    	background: #f5f5f5;
    	color: #666;
    }
</style>